<template>
  <div class="page-content-container">
    <h2>快速上手</h2>
    <p>本节将介绍如何在项目中使用 rtlink-ui-plus。</p>

    <h3>npm 安装</h3>
    <p>推荐使用 npm 的方式安装，它能更好地和 <a href="https://webpack.js.org/">webpack</a> 打包工具配合使用。</p>
    <p>rtlink-ui-plus 是基于 <a href="https://element.eleme.cn/#/zh-CN/component/installation">element-ui</a>
      的再开发组件库，使用前需确保您已安装了 element-ui。</p>
    <!-- --------- -->
    <pre v-highlightjs>
      <code class="javascript">{{ install }}</code>
      <code class="javascript">{{ install2 }}</code>
    </pre>

    <h3>引入组件</h3>
    <p>在 main.js 中写入以下内容：</p>
    <!-- --------- -->
    <pre v-highlightjs>
      <code class="javascript">{{ code }}</code>
    </pre>
    <p> 以上代码便完成了 rtlink-ui-plus 的引入。</p>

  </div>
</template>
<script>

export default {
  data() {
    return {
      install: `npm i element-ui -s`,
      install2: `npm i rtlink-ui-plus -s`,
      code:
        `import Vue from 'vue';
import RtlinkUIPlus from 'rtlink-ui-plus';
import App from './App.vue';

Vue.use(RtlinkUIPlus);

new Vue({
  el: '#app',
  render: h => h(App)
});`,
    }
  }
}

</script>


<style scoped>
p {
  font-size: 15px;
}
</style>